<!-- 任务二级页面，点击日期查询对应日期任务 -->
<template>
<scroll-view class="box-b" scroll-y enable-back-to-top>
  		<view class="example-body" v-if="dateControl === true ">
  			<uni-datetime-picker v-model="datetimerange" type="datetimerange" rangeSeparator="至" />
  		</view>
    <view class="listBox" @click="goDetail(item.id)" v-for="(item,index) in listData" :key="item.id">
      <view class="listTit">
        <view class="tit">
         {{index + 1}} {{item.name}}
        </view>
        <view class="startTime">
          {{item.startTime}}
        </view>
        <view class="state" :class="item.state === 1 ? 'stateover':''  ">
           {{item.state === 0 ? "未完成": "完成"}}
        </view>
      </view>
      <view class="listDetail">
        <view class="txt">
          <image src="../../static/icons/位置.png" mode=""></image>{{item.landName}}
        </view>
        <view class="txt">
          <image src="../../static/icons/empty-box.png" mode=""></image>农业一袋
        </view>
        <view class="txt">
          <image src="../../static/icons/时间_o.png" mode=""></image>{{item.endTime}}
        </view>
      </view>
    </view>
    </scroll-view>
</template>

<script>
  import {postTaskListApi} from '@/api/task.js'
  export default {
    data() {
      return {
        datetimesingle:'',
        datetimerange: [],
        postData:{},
        dateControl:false,
        listData:[]
      };
    },
    watch:{
      			datetimerange(newval) {
      				console.log('范围选:', this.datetimerange);
      			}
    },
    mounted() {
      if( this.postData.startTime !== "undefined") {
        this.postTaskList(this.postData)
      }
    },
    methods:{
      async postTaskList(data) {
        const res = await postTaskListApi(data)
        this.listData = res
        console.log(res);
      },
      goDetail(id) {
        uni.navigateTo({
          url: `/pages/taskState/taskState?id=${id}`
        });
      },
    },
    onReady() {
      uni.setNavigationBarTitle({
        title:'任务列表'
      })
    },
 onLoad: function (option) { 
    this.postData.startTime=option.startTime
    this.postData.endTime=option.endTime
     this.postData.startTime === "undefined" ? this.dateControl = true : this.dateControl = false
    // console.log(this.postData);
 	}
  }
</script>

<style lang="scss">
  page {
    background-color: #f5faf9;
  }
   .box-b {
     margin-top: 40rpx;
     // height: 100vh;
     width: 100%;
     // padding: 0 26rpx;
     box-sizing: border-box;
     background-color: #f2f7f6;
     .listBox {
       height: 266rpx;
       box-sizing: border-box;
       margin: 0 26rpx 30rpx;
       
       background-color: #fff;
       box-shadow: 5rpx 0rpx 15rpx rgba(0,0,0,0.5);
       border-radius: 10rpx;
     }
     .listTit {
       display: flex;
       justify-content: space-between;
       margin: 42rpx 60rpx 10rpx;
       padding: 20rpx 0;
       height: 66rpx;
       .tit {
         color: #64c0b1;
         font-weight: 700;
       }
       .state {
         width: 100rpx;
         height: 44rpx;
         background-color: #fff0bf;
         border: 3rpx solid #f3bf3a;
         border-radius: 8rpx;
         font-size: 20rpx;
         text-align: center;
         line-height: 44rpx;
         font-weight: 600;
         color: orange;
       }
       .stateover {
         background-color: #80efb1 !important;
         color: #fff;
         border: 3rpx solid #72d59d;
       }
       .startTime {
         width: 200rpx;
         height: 44rpx; 
         font-size: 20rpx;
         text-align: center;
         line-height: 44rpx;
         color: #ccc;
       }
     }
     .listDetail {
       margin: 0 64rpx;
       border-top: 2px dashed #61c0b3;
       .txt {
         margin: 15rpx 0;
         font-size: 26rpx;
         vertical-align: top;
         image{
           width: 32rpx;
           height: 32rpx;
           margin-bottom: -5rpx;
           margin-right: 20rpx;
         }
       }
     }
   }
   
</style>
